<template>
  <div class="todos">

    <header>
      <label class="allbox"><input type="checkbox"></label>
      <label class="textbox"><input type="text" placeholder="What needs to be done?"></label>
    </header>

    <section>
      <ul>
        <li>
          <label><input type="checkbox"></label>
          <div class="centent-input">
            <h1 class="active">1111111111111111555555551111111111115555511111111111</h1>
            <input type="text">
          </div>
          <div class="btns"><button>删除</button></div>
        </li>
        <li>
          <label><input type="checkbox"></label>
          <div class="centent-input">
            <h1 class="active">1111111111111111555555551111111111115555511111111111</h1>
            <input type="text">
          </div>
          <div class="btns"><button>删除</button></div>
        </li>
      </ul>
    </section>

    <footer>
      <div class="left">
        <em>1</em>
        <em>items</em>
        <em>left</em>
      </div>
      <div class="status">
        <span class="active">All</span>
        <span>Active</span>
        <span>completed</span>
      </div>
      <div class="clearCompleted">Clear completed</div>
    </footer>
  </div>
</template>
<script>
  // export default {
  //   name:'indexName'
  // }
</script>
<style scoped>
  .todos {
    width: 800px;
    margin: 50px auto;
  }
  ul,li,p,div,html,body {
    padding: 0;
    margin: 0;
  }
  em,i,u {
    font-style: normal;
  }
  li {
    list-style-type: none;
  }

  /* 头部header */
  header {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #999;
    padding: 0 20px;
  }
  header > .allbox {
    width: 80px;
  }
  header > .allbox > input {
    width: 25px;
    height: 25px;

  }
  header > .textbox {
    flex: 1;
  }
  header > .textbox > input {
    box-sizing: border-box;
    height: 40px;
    width: 100%;
    padding: 0 30px 0 0;
    outline: none;
    border: 0;
    box-shadow: inset 0 -2px 1px rgb(0 0 0 / 3%);
    font-size: 24px;
    font-family: inherit;
    font-weight: inherit;
    line-height: 1.4em;
  }

  /* section */
  section,
  section > ul,
  section > ul > li
  {
    width: 100%;

  }
  section > ul {
    box-sizing: border-box;
    
  }
  section > ul > li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #2e2e2e;
    padding: 5px 20px;
    box-sizing: border-box;

    
  }
  section > ul > li > label {
    width: 80px;
    flex-shrink: 0;
   
  }
  section > ul > li > label > input[type=checkbox] {
    width: 25px;
    height: 25px;
  }
  section > ul > li > div.btns {
    width: 100px;
    text-align: right;
    flex-shrink: 0;
  }

  section > ul > li > div.centent-input {
    flex: 1;
    flex-shrink: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  section > ul > li > div.centent-input > h1 {
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: none;
  }
  section > ul > li > div.centent-input > .active {
    display: block;
  }
  section > ul > li > div.centent-input > input {
    width: 100%;
    box-sizing: border-box;
    height: 45px;
    outline: none;
    padding: 0 15px;
    box-sizing: border-box;
    display: none;
    
  }
  section > ul > li > div.btns > button {
    
    background-color: #409EFF;
    border:1px solid #409EFF;
    padding: 5px 15px;
    cursor: pointer;
    color: #fff;
    transition: background-color .2s linear;
  }
  section > ul > li > div.btns > button:hover {
    background-color: #F56C6C;
    border-color: #F56C6C;
  }

  /* footer */
  footer {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    /* border-bottom: 1px solid #2e2e2e; */
    box-shadow: 0 1px 1px rgb(0 0 0 / 20%), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgb(0 0 0 / 20%), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgb(0 0 0 / 20%);
  }
  footer > div.left {
    width: 100px;
    display: flex;
    justify-content: space-between;
  }
  footer > div.status {
    display: flex;
    width: 280px;
    justify-content: flex-start;
  }
  footer > div.status > span {
    margin-right: 10px;
    background-color: #409EFF;
    padding: 5px 10px;
    cursor: pointer;
    color: #fff;
    transition: background-color .2s linear;
  }
  footer > div.status > span.active {
    background-color: #F56C6C;
  }
  footer > div.clearCompleted {
    background-color: #409EFF;
    padding: 5px 10px;
    color: #fff;
    cursor: pointer;
    transition: background-color .2s linear;
  }
  footer > div.clearCompleted:hover {
    background-color: #F56C6C;
  }
</style>
